<template>
  <view class="page">
    <view class="container">

      <!-- 搜索框 -->
      <view class="search-box">
        <input
            class="search-input"
            type="text"
            v-model="searchQuery"
            placeholder="搜索医院、科室"
            confirm-type="search"
            @confirm="onSearch"
        />
        <text class="iconfont search-icon">&#xe6d4;</text>
      </view>

      <!-- 我的挂号记录 -->
      <view class="record-section" @click="navigateTo('record')">
        <view class="record-left">
          <image src="/static/record-icon.png" class="record-icon"></image>
          <text class="record-text">我的挂号记录</text>
        </view>
        <view class="record-right">
          <text class="view-text">查看</text>
          <text class="iconfont">&#xe601;</text>
        </view>
      </view>

      <!-- 医院信息列表 -->
      <view class="hospital-info-section">
        <view
            v-for="(hospital, index) in hospitalList"
            :key="index"
            class="hospital-item"
        >
          <image :src="hospital.image" class="hospital-icon"></image>
          <view class="hospital-details">
            <view class="hospital-header">
              <text class="hospital-grade">{{ hospital.hospitalLevel }}</text>
              <text class="hospital-name">{{ hospital.name }}</text>
            </view>
            <text class="hospital-address">{{ hospital.address }}</text>
          </view>
          <view class="hospital-action">
            <!-- 跳转到医生页面 -->
            <button class="register-btn" @click="navigateToDoctorList(hospital.id)">立即挂号</button>

          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 接收科室ID
      departmentId: null,
      searchQuery: '',
      // 医院列表数据
      hospitalList: [],
    };
  },
  onLoad(options) {
    // 获取路由参数
    this.departmentId = options.departmentId || '未知';
    console.log('科室ID:', options.departmentId);
  },

  methods: {
    // 搜索功能
    onSearch() {
      uni.showToast({
        title: `搜索内容：${this.searchQuery}`,
        icon: 'none',
      });
    },

    // 跳转到挂号记录页面
    navigateTo(type) {
      uni.navigateTo({
        url: `/pages/registrations/${type}/${type}`,
      });
    },
    // 跳转挂号页面
    registerHospital(hospitalId) {
      uni.navigateTo({
        url: `/pages/registrations/register/register?id=${hospitalId}`,
      });
    },
    // 跳转到医院医生页面
    navigateToDoctorList(hospitalId) {
      uni.navigateTo({
        url: `/pages/registrations/doctor-list/doctor-list?id=${hospitalId}`,
      });
    },
    getHospitalList(){
      uni.request({
        url:'http://localhost:8080/app/registration/listHospital',
        success:result => {
          if (result.data.code==200){
            console.log(result)
            this.hospitalList = result.data.rows;
          }
        }
      })
    }
  },
  created() {
    this.getHospitalList()
  },
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 32rpx;
  color: #333;
}

.container {
  width: 100%;
  padding: 20rpx;
}

/* 🆕 新增代码开始：搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.search-input {
  flex: 1;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.search-icon {
  font-size: 36rpx;
  margin-left: 20rpx;
  color: #999;
}

/* 🆕 新增代码结束 */

/* 🆕 新增代码开始：挂号记录样式 */
.record-section {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-left {
  display: flex;
  align-items: center;
}

.record-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.record-text {
  font-size: 28rpx;
  color: #333;
}

.record-right {
  display: flex;
  align-items: center;
}

.view-text {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

/* 🆕 新增代码结束 */
/* 医院信息样式 */
/* 🆕 新增代码开始 */
.hospital-info-section {
  margin-top: 40rpx;
}

.hospital-item {
  display: flex;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.hospital-icon {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.hospital-details {
  flex: 1;
}

.hospital-header {
  display: flex;
  align-items: center;
}

.hospital-grade {
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
  background-color: #4caf50;
  color: #fff;
  margin-right: 10rpx;
  font-size: 24rpx;
}

.hospital-name {
  font-size: 28rpx;
  color: #333;
}

.hospital-distance,
.hospital-address,
.hospital-department {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.hospital-action {
  display: flex;
  align-items: center;
}

.register-btn {
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  background-color: #4caf50;
  color: #fff;
  font-size: 26rpx;
}

/* 🆕 新增代码结束 */
</style>
